<template>
	<view class="page" :style="themeColor">
		<view class="flex benben-position-layout flex flex-wrap align-center aboutUs_flex_0"
			:style="{height:(64+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between flex-sub aboutUs_fd0_0'>
				<view class='flex flex-wrap align-center aboutUs_fd0_0_c2' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
					<text class='fu-iconfont2  aboutUs_fd0_0_c0_c0' @tap.stop="handleJumpDiy" data-type="back"	data-url="1">
						<uv-icon name="close" color="#000" size="25rpx"></uv-icon>
					</text>
				</view>
				<view class='flex flex-wrap align-stretch justify-center flex-sub'>
					<text class='aboutUs_fd0_0_c1_c0'>单词打印</text>
				</view>
				<view class='flex flex-wrap align-center aboutUs_fd0_0_c2'>
					<!-- <association></association> -->
				</view>
			</view>

		</view>
		<view :style="{height: (64+StatusBarRpx)+'rpx'}"></view>
		<view class="loading_css" v-if="isShow">
			<uv-loading-icon size="24" mode="circle" color="#4087FD" :show="true"></uv-loading-icon>
			<view>加载中</view>
		</view>
		<block v-else>
			<view class="tips_info">
				<view class="tips_text">1、打开蓝牙，并关联上打印机</view>
				<view>2、点击打印后请等待3秒左右，等待打印完成即可</view>
			</view>
			<view class="dayin_content">
				<view class="tabs">
					<view class="tabs_item" :class="tabs == 1 ? 'active_item' : ''" @tap.stop="selectTabs(1)">
						<text>打印英文</text>
						<text class="tabs_line" v-if="tabs == 1"></text>
					</view>
					<view class="tabs_item" :class="tabs == 2 ? 'active_item' : ''" @tap.stop="selectTabs(2)">
						<text>打印中文</text>
						<text class="tabs_line" v-if="tabs == 2"></text>
					</view>
					<view class="tabs_item" :class="tabs == 3 ? 'active_item' : ''" @tap.stop="selectTabs(3)">
						<text>打印中英文</text>
						<text class="tabs_line" v-if="tabs == 3"></text>
					</view>
				</view>
				<view class="list" v-for="(item, index) in list" :key="index">
					<view class="item" v-for="(v, k) in item" :key="k">
						<view class="item_left">
							<text v-if="tabs == 1 || tabs == 3">{{v.word}}</text>
						</view>
						<view class="item_center"></view>
						<view class="item_right">
							<text v-if="tabs == 2 || tabs == 3">{{v.c_word}}</text>
						</view>
					</view>
				</view>
			</view>
			
		</block>
		<view class="noData" v-if="list.length == 0 && !isShow">
			<image :src='STATIC_URL+"no.png"'></image>
		</view>

		<view class="sub_btn">
			<view class="sub_text" @tap.stop="getPrint">提交打印</view>
		</view>
		
		<view :style="{height: '110rpx'}"></view>


	</view>
</template>
<script>
	import association from "./components/association.vue"
	export default {
		components: {
			association
		},


		data() {
			return {
				isShow: true,
				tabs: 1,
				id: "",  // 请求id
				list: [],
				printList: [],
				is_submit: false,
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},
		},
		watch: {},
		onLoad(options) {
			let {id} = options;
			if (id !== undefined) this.id = id;
			this.getData();
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {
			this.is_submit = false;
		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			selectTabs(type) {
				this.tabs = type;
				if (this.list.length > 0) {
					this.printList = [];
					if (this.tabs == 1) {
						this.list.forEach((v, k) => {
							v.forEach((v1, k1) =>{
								this.printList.push({
									ChName: "",
									EnName: v1.word
								})
							})
						})
					} else if (this.tabs == 2) {
						this.list.forEach((v, k) => {
							v.forEach((v1, k1) =>{
								this.printList.push({
									ChName: v1.c_word,
									EnName: ""
								})
							})
						})
					} else if (this.tabs == 3) {
						this.list.forEach((v, k) => {
							v.forEach((v1, k1) =>{
								this.printList.push({
									ChName: v1.c_word,
									EnName: v1.word
								})
							})
						})
					}
				}
				// console.log(this.printList);
			},
			// 获取单词标识打印数据  post6561aaa07ab20
			getData() {
				this.$api.post(global.apiUrls.post6561aaa07ab20, {
					aid: this.id
				}).then(res => {
					// console.log(res);
					this.isShow = false;
					if (res.data.code == 1) {
						this.list = res.data.data;
						if (this.list.length > 0) {
							this.list.forEach((v, k) => {
								v.forEach((v1, k1) =>{
									this.printList.push({
										ChName: "",
										EnName: v1.word
									})
								})
							})
						}
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			// 打印
			getPrint() {
				if (this.printList.length == 0) {
					this.$message.info('没有需要打印的单词');
					return;
				}
				let _this = this;
				if (_this.is_submit) return;
				if (_this.$store.state.printerStatus == 1) {
					_this.is_submit = true;
					let data = {
						"title": "智海马私人订制",
						"data": JSON.stringify(_this.printList)
					}
					_this.$printer.printContentTwo(res => {
						console.log(res);
						if (res.code == 1) {
							
						} else {
							_this.$message.info('打印失败，请尝试重连打印机后再次打印');
							_this.is_submit = false;
						}
					}, data)
				} else {
					_this.$message.info('打印机初始化失败,请联系客服');
				}
			},
		}
	};
</script>
<style lang="scss" scoped>
	.sub_btn {
		width: 100%;
		position: fixed;
		bottom: 32rpx;
		padding: 0 25rpx;
		.sub_text {
			height: 68rpx;
			line-height: 68rpx;
			text-align: center;
			background: #4087FD;
			border-radius: 34rpx;
			font-size: 25rpx;
			color: #fff;
			font-weight: 500;
		}
	}
	.dayin_content {
		background: #fff;
		margin: 15rpx 25rpx;
		border-radius: 10rpx;
		padding-bottom: 24rpx;
	}
	.tabs {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 115rpx;
		margin-bottom: 45rpx;
		.tabs_item {
			font-size: 20rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #333333;
			padding: 20rpx 0;
			position: relative;
		}
		.active_item {
			color: #4087FD;
			font-weight: bold;
		}
		.tabs_line {
			display: inline-block;
			width: 31rpx;
			height: 5rpx;
			background: #4087FD;
			border-radius: 6rpx;
			position: absolute;
			left: 50%;
			bottom: 0;
			transform: translateX(-50%);
		}
	}
	.list {
		margin: 0rpx 160rpx 10rpx;
		border-bottom: 1px solid #DDDDDD;
		.item {
			display: flex;
			border-top: 1px solid #DDDDDD;
			.item_left {
				width: 188rpx;
				height: 50rpx;
				
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 20rpx;
			}
			.item_center {
				width: 1px;
				height: 50rpx;
				background: #DDDDDD;
			}
			.item_right {
				width: 188rpx;
				height: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 20rpx;
			}
		}
	}
	.tips_info {
		background: #eee;
		width: 100%;
		height: 79rpx;
		padding: 15rpx 25rpx;
		font-size: 15rpx;
		color: #666;
		.tips_text {
			margin-bottom: 8rpx;
		}
	}
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #f8f8f8;
		background-size: 100% auto !important;
	}

	.aboutUs_flex_0 {
		background: #fff;
		width: 100%;
		height: 64rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.aboutUs_fd0_0_c2 {
		width: 100rpx;
		height: 50rpx;
	}

	.aboutUs_fd0_0_c1_c0 {
		font-size: 25rpx;
		font-weight: 500;
		color: #333;
		line-height: 64rpx;
	}

	.aboutUs_fd0_0_c0_c0 {
		font-size: 25rpx;
		font-weight: 500;
		color: #333;
	}

	.aboutUs_fd0_0 {
		margin: 0rpx 25rpx 0rpx 25rpx;
	}

	.aboutUs_fd1_1_c0 {
		font-weight: 400;
		color: #333333;
		font-size: 20rpx;
		margin-top: 25rpx;
	}

	.aboutUs_fd1_0 {
		width: 150rpx;
		height: 150rpx;
		border-radius: 16rpx;
		margin: 98rpx 0rpx 0rpx 0rpx;
	}

	.aboutUs_flex_2 {
		width: 100%;
		// height: 168rpx;
		overflow: hidden;
		z-index: 10;
		bottom: calc(0rpx + var(--window-bottom));
		padding-bottom: 35rpx;
	}

	.aboutUs_fd2_1 {
		margin: 8rpx 0rpx 0rpx 0rpx;
		color: #BFBFBF;
		font-size: 20rpx;
		font-weight: 400;
		line-height: 40rpx;
	}

	.aboutUs_fd2_0 {
		color: #BFBFBF;
		font-size: 20rpx;
		font-weight: 400;
		line-height: 40rpx;
	}
</style>